<template>
    <el-dialog v-model="dialogVisible" @open="dialogOpen" @close="dialogClose" title="删除用户">
        <el-form :model="form">
            <el-form-item label="输入要删除的id" hide-required-asterisk>
                <el-input v-model="form.id" autocomplete="off" />
            </el-form-item>

        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleCancel">取消删除</el-button>
                <el-button type="primary" @click="handledel">
                    确定删除
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'
const form = reactive({
    //用户名 必填
    id: "", 
})

// 声明控制弹窗显示与隐藏的变量
let dialogVisible = ref(false)

// 定义组件以后接收的数据
let props = defineProps({
    // 弹窗的显示与隐藏
    modelValue:{
        type:Boolean,
        default:false
    }
})
// 声明监听props中modelValue的变量的变化
// 定义组件将来点击确定和取消触发的方法
let emit = defineEmits(["update:modelValue"])

// 声明弹窗打开的方法
let dialogOpen = () => {
    // console.log("弹窗打开了")
}
// 声明弹窗关闭的方法
let dialogClose = ()=>{
    dialogVisible.value = false
    emit("update:modelValue",dialogVisible.value)
}
// 声明点击取消的方法
let handleCancel = ()=>{
    console.log(1);
    // 关闭弹窗
    dialogVisible.value = false
    // 触发父组件的cancel方法
    // emit("cancel")
}
// 声明确定删除的方法
let handledel = async ()=>{
    // 关闭弹窗
    dialogVisible.value = false
    console.log(form.id);
  

}
watch(()=>props.modelValue,(newVal)=>{
     // 判断props的modelValue的值是否和当前组件的dialogFormVisible的值一样，如果不一样，就同步
    if(newVal !== dialogVisible.value){
        dialogVisible.value = newVal
    }
})


</script>